<template>
	<view class="content">
		<block v-if="goods != null && goods != ''">
			<view class="buy_goods_wrap" v-for="(item, index) in goods" :key="index" @click="go_goodsDetail(item)">
				<view class="buy_goods_item" v-if="item.posgoods">
					<view class="goods_img"><image :src="Config_ysy.image_url +item.posgoods.image"></image></view>
					<view class="goods_middle">
						<view class="goods_title">{{ item.posgoods.name }}</view>
						<view class="goods_props">
							<view class="props_item" >{{ item.posgoods.p_name }}</view>
						</view>
						<view class="middle_bottom">
							<view class="price">
								<text>￥</text>
								{{ item.posgoods.price }}
							</view>
							<view class="buy_peo">{{ item.posgoods.buy_quantity }}人付款</view>
							<view class="bottom_right">
								<view class="num" @click.stop="jianfa(item)">-</view>
								<view class="num">{{ item.quantity }}</view>
								<view class="num" @click.stop="jiafa(item)">+</view>
							</view>
						</view>
					</view>

					<view class="goods_right">
						<view class="check" @click.stop="select_goods(item, index)">
							<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/weixuanze.png" v-if="!item.check_select"></image>
							<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/xuanze.png" v-if="item.check_select"></image>
							<!-- <radio :value="item.goods_id" checked="true" @change.stop=""/> -->
							<!-- <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7);" /> -->
						</view>

						<view class="delete" @click.stop="delete_goods(item, index)"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/shanchu2.png"></image></view>
					</view>
				</view>
				
				<!-- 门店商品 -->
				<view class="buy_goods_item" v-else>
					<view class="goods_img"><image :src="item.image"></image></view>
					<view class="goods_middle">
						<view class="goods_title">{{ item.goods_name }}</view>
						<view class="goods_props">
							<view class="props_item" >{{ item.goods_desc }}</view>
						</view>
						<view class="middle_bottom">
							<view class="price">
								<text>￥</text>
								{{ item.goods_price }}
							</view>
							<view class="buy_peo">{{ item.goods_sales }}人付款</view>
							<view class="bottom_right">
								<view class="num" @click.stop="jianfa(item)">-</view>
								<view class="num">{{ item.total_num }}</view>
								<view class="num" @click.stop="jiafa(item)">+</view>
							</view>
						</view>
					</view>
				
					<view class="goods_right">
						<view class="check" @click.stop="select_goods(item, index)">
							<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/weixuanze.png" v-if="!item.check_select"></image>
							<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/xuanze.png" v-if="item.check_select"></image>
							<!-- <radio :value="item.goods_id" checked="true" @change.stop=""/> -->
							<!-- <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7);" /> -->
						</view>
				
						<view class="delete" @click.stop="delete_goods(item, index)"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/shanchu2.png"></image></view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
			<!-- 底部栏 -->
			<view class="bottom_bar">
				<view class="bar_left" @click.stop="selectAll">
					<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/weixuanze.png" v-if="!check_select_all"></image>
					<image class="select_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/cart/xuanze.png" v-if="check_select_all"></image>
					<!-- <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7);" /> -->
					<text>全选</text>
				</view>
				<view class="bar_right">
					<view class="gongji" v-if="cart_type==1">运费:￥{{express_price.toFixed(2)}}</view>
					<view class="gongji" v-else>共{{select_number}}件</view>
					<view class="heji">
						合计
						<text>￥{{selectPriceAll.toFixed(2)}}</text>
					</view>
					<view class="jiesuan"><view class="jiesuan_btn" @click="toPayOrder">去结算</view></view>
				</view>
			</view>
		</block>

		<block v-else>
			<view class="null_wrap">
				<view class="order_null"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/dingdankongkong.png"></image></view>
				<view class="toVisit" @click="toMallList">去逛逛</view>
			</view>
		</block>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			selectPriceAll:0,
			select_number:0,
			check_select_all: false,
			goods: [
			// 	{
			// 		goods_id: 1,
			// 		goods_img: '../../static/detail/4.png',
			// 		goods_name: 'POS机迷你小型扫码一体机商家开店收银双系统',
			// 		number: 1,
			// 		check_select: false,
			// 		goods_props: [
			// 			{
			// 				props_item: 'POS收款机'
			// 			},
			// 			{
			// 				props_item: '电阻屏'
			// 			},
			// 			{
			// 				props_item: '9英寸以下'
			// 			}
			// 		],
			// 		price: '50',
			// 		buy_peo: '50'
			// 	},
			// 	{
			// 		goods_id: 2,
			// 		number: 1,
			// 		check_select: false,
			// 		goods_img: '../../static/detail/4.png',
			// 		goods_name: 'POS机迷你小型扫码一体机商家开店收银双系统',
			// 		goods_props: [
			// 			{
			// 				props_item: 'POS收款机'
			// 			},
			// 			{
			// 				props_item: '电阻屏'
			// 			},
			// 			{
			// 				props_item: '9英寸以下'
			// 			}
			// 		],
			// 		price: '50',
			// 		buy_peo: '50'
			// 	}
			],
			
			pageNum:1,
			loaded:false,
			loadingType:'more',
			type:'',
			pageNum1:1,
			loaded1:false,
			loadingType1:'more',
			cart_type:'',
			pageNum2:1,
			loaded2:false,
			loadingType2:'more',
			express_price:0,
			token:'',
		};
	},
	onShow() {
		// /api/cshop/posshoppingtrolley/list
		// /api/cshop/posshoppingtrolley/list
		
	},
	onLoad(option) {
		this.token=option.token
		if(option.type){
			this.type = option.type
			this.load(0)
		}else if(option.cart_type){
			this.cart_type = option.cart_type;
			this.getGoodsCart(0);
		}else{
			this.load(0)
		}
	},
	//下拉刷新
	onReachBottom() {
		if(this.cart_type){
			this.getGoodsCart(1);
		}else{
			this.load(1);
		}
	},
	methods: {
		//获取购物车
		load(source){
			//判断
			// let userInfo = uni.getStorageSync('userInfo');
			let params = {
			};
			var url = '';
			if(this.type=='store'){
				if (source == 0 && this.loaded1) {
					return;
				}
				if (source == 1 && this.loadingType1 != 'more') {
					return;
				}
				this.loadingType1='loading'
				params = {
					page_num:this.pageNum1,
					token:this.token
				};
				url = '/api/manystore/cart/getlists'
			}else{
				if (source == 0 && this.loaded) {
					return;
				}
				if (source == 1 && this.loadingType != 'more') {
					return;
				}
				this.loadingType='loading'
				params = {
					page_num:this.pageNum,
					token:this.token
				};
				url = '/api/cshop/posshoppingtrolley/list'
			}
			//防止重复加载
			
			this.Unfold_data.upload_data(params, 'POST', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.loadingType = 'more';
					if(res.data.data==null){
						    this.loadingType = 'noMore';
							return;
					}
					this.goods = this.goods.concat(res.data.data);
					if(this.type == 'store'){
						this.pageNum1 = this.pageNum1 + 1;
						this.loaded1 = true
					}else{
						this.pageNum = this.pageNum + 1;
						this.loaded = true
					}
					
					// console.log(fileArray)
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		
		// 获取商品购物车
		getGoodsCart(source){
			//判断
			// let userInfo = uni.getStorageSync('userInfo');
			let params = {
				token:this.token
			};
			var url = '';
			if (source == 0 && this.loaded2) {
				return;
			}
			if (source == 1 && this.loadingType2 != 'more') {
				return;
			}
			this.loadingType2='loading'
			// params = {
			// 	page_num:this.pageNum2
			// };
			url = '/api/manystore/cart/getlists'
			//防止重复加载
			
			this.Unfold_data.upload_data(params, 'POST', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.goods = res.data.data.goods_list;
					
					// this.loadingType2 = 'more';
					// if(res.data.data==null){
					// 	this.loadingType2 = 'noMore';
					// 	return;
					// }
					
					// console.log(this.goods)
					// this.goods = this.goods.concat(res.data.data.goods_list);
					// this.pageNum2 = this.pageNum2 + 1;
					// this.loaded2 = true
					
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		jisuanPriceNumber(){
			this.select_number = 0;
			this.selectPriceAll = 0;
			this.express_price = 0
			this.check_select_all = true;
			this.goods.forEach(item=>{
				// console.log('akak',item)
				if(!item.check_select){
					this.check_select_all = false;
					
				}else{
					// this.select_number += item.total_num;
					
					
					if(this.cart_type){
						// 商家
						this.selectPriceAll += Number(item.goods_price)*Number(item.total_num)+Number(item.express_price);
						this.express_price += Number(item.express_price);
						this.select_number += Number(item.total_num);
					}else{
						// pos机
						this.selectPriceAll += item.posgoods.price*item.quantity;
						this.select_number += item.quantity;
					}
				}
				
			});
		},
		selectAll(){
			this.check_select_all = !this.check_select_all;
			this.goods.forEach(item=>{
				if(this.check_select_all){
					item.check_select = true;
				}else{
					item.check_select = false;
				}
			});
			this.jisuanPriceNumber();
		},
		select_goods(item, index) {
			item.check_select = !item.check_select;
			this.jisuanPriceNumber();
		},
		delete_goods(item, index) {
			if(item){
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					success: res => {
						if (res.confirm) {
							var url = '';
							let params = {};
							// let userInfo = uni.getStorageSync('userInfo');
							if(this.cart_type){
								url = '/api/manystore/cart/delete'
								params = {
									goods_id:item.goods_id,
									goods_sku_id:item.goods_sku_id,
									token:this.token
								};
							}else{
								url = '/api/cshop/posshoppingtrolley/del';
								params = {
									id:item.id,
									token:this.token
								};
							}
							
							
							this.Unfold_data.upload_data(params, 'POST', url, res => {
								if (res.statusCode == 200 && res.data.code == 1) {
									// this.product = res.data.data;
									this.goods.splice(index, 1);
									this.jisuanPriceNumber();
								} else {
									this.Unfold_data.showWindow(res.data.msg);
								}
							});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		jianfa(item) {
			// let userInfo = uni.getStorageSync('userInfo');
			if(this.cart_type ==1){
				if (item.total_num > 1) {
					console.log(item)
					item.total_num -= 1;
					// POST/api/cshop/posshoppingtrolley/edit
					var url = '';
					if(this.cart_type){
						// 商家
						url = '/api/manystore/cart/sub'
					}
					// 请求参数
					let params = {
						goods_sku_id:item.goods_sku_id,
						goods_id:item.goods_id,
						token:this.token
					};
					// 请求方法
					this.Unfold_data.upload_data(params, 'POST', url, res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							// this.product = res.data.data;
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
					this.jisuanPriceNumber();
				}
			}else{
				if (item.quantity > 1) {
					item.quantity -= 1;
					// POST/api/cshop/posshoppingtrolley/edit
					var url = '';
					if(this.cart_type){
						// 商家
						url = '/api/manystore/shoppingtrolley/edit'
					}else{
						// pos机
						url = '/api/cshop/posshoppingtrolley/edit'
					}
					// 请求参数
					let params = {
						quantity:item.quantity,
						id:item.id,
						token:this.token
					};
					// 请求方法
					this.Unfold_data.upload_data(params, 'POST', url, res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							// this.product = res.data.data;
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
					this.jisuanPriceNumber();
				}
			}
			
		},
		jiafa(item) {
			// let userInfo = uni.getStorageSync('userInfo');
			if(this.cart_type==1){
				// if(item.total_num >= item.goods.quantity){
				// 	this.Unfold_data.showWindow('商品库存不足!');
				// 	return;
				// }
				// item.total_num += 1;
				// POST/api/cshop/posshoppingtrolley/edit
				var url = '';
				if(this.cart_type){
					// 商家
					url = '/api/manystore/cart/add'
				}else{
					// pos机
					url = '/api/cshop/posshoppingtrolley/edit'
				}
				
				// 请求参数
				let params = {
					goods_sku_id:item.goods_sku_id,
					goods_num:1,
					goods_id:item.goods_id,
					token:this.token
				};
				// 请求方法
				this.Unfold_data.upload_data(params, 'POST', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						// this.product = res.data.data;
						//防止字符串拼接，转为num
						 item.total_num = Number(item.total_num) + 1;
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			}else{
				if(item.quantity >= item.goods.quantity){
					this.Unfold_data.showWindow('商品库存不足!');
					return;
				}
				item.quantity += 1;
				// POST/api/cshop/posshoppingtrolley/edit
				var url = '';
				if(this.cart_type){
					// 商家
					url = '/api/manystore/shoppingtrolley/edit'
				}else{
					// pos机
					url = '/api/cshop/posshoppingtrolley/edit'
				}
				
				// 请求参数
				let params = {
					quantity:item.quantity,
					id:item.id,
					token:this.token
				};
				// 请求方法
				this.Unfold_data.upload_data(params, 'POST', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						// this.product = res.data.data;
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			}
			
			this.jisuanPriceNumber();
		},
		go_goodsDetail(item) {
			var url = ''
			if(this.cart_type == 1){
				//门店商品详情
				url = '/pages/productDetail/productDetail?id=' + item.goods_id +'&goods_min_price='+Number(item.goods_price)
			}else{
				//pos机商品详情
				url = '/pages/goodsDetail/goodsDetail?id=' + item.pos_id
			}
			uni.navigateTo({
				url: url
			});
		},
		toPayOrder() {
			if(this.select_number<1){
				this.Unfold_data.showWindow("您还没有选择商品");
				return;
			}
			let list = this.goods;
			// console.log('list',list)
			let cart_list = [];
			list.forEach(item => {
				if (item.check_select) {
					data:cart_list.push(item);
					
				}
			});
			// console.log(cart_list)
			if(this.cart_type){
				sui.navigateTo({
					url: `/pages/payOrder/payOrder?sum=${this.selectPriceAll}&data=${JSON.stringify(cart_list)}&type=store&express_price=${this.express_price}`
				});
			}else{
				sui.navigateTo({
					url: `/pages/payOrder/payOrder?sum=${this.selectPriceAll}&data=${JSON.stringify(cart_list)}`
				});
			}
			
			// var url = '/api/cshop/paypos/payTrolley';
			// this.Unfold_data.upload_data(cart_list, 'POST', url, res => {
			// 	console.log(res);
			// 	if (res.statusCode == 200 && res.data.code == 1) {
			// 		
			// 	} else {
			// 		this.Unfold_data.showWindow(res.data.message);
			// 	}
			// });
		},
		toMallList() {
			if(this.cart_type){
				uni.navigateBack({
					delta:1
				})
			}else{
				uni.navigateTo({
					url: '/pages/indexMallList/indexMallList'
				});
			}
			
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background: #ededed;
}
.content {
	.select_img {
		width: 60upx;
		height: 60upx;
	}
	width: 100%;
	position: relative;
	.buy_goods_wrap {
		width: 90%;
		height: 200upx;
		margin: 0 auto;
		margin-top: 30upx;
		background: #ffffff;
		box-shadow: 0 0 30upx #c9c9c9;
		border-radius: 20upx;
		.buy_goods_item {
			width: 100%;
			height: 200upx;
			display: flex;
			.goods_img {
				flex: 3;
				image {
					border-radius: 20upx;
					width: 200upx;
					height: 200upx;
				}
			}
			.goods_middle {
				flex: 6;
				padding: 0 10upx;
				height: 200upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.goods_title {
					font-weight: bold;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.goods_props {
					display: flex;
					align-items: center;
					padding: 10upx 0;
					.props_item {
						font-size: 20upx;
						color: #9f9f9f;
						// border-right: 1upx solid #9f9f9f;
						padding: 0 5upx;
					}
				}
				.middle_bottom {
					display: flex;
					align-items: center;
					.price {
						flex: 1;
						font-size: 36upx;
						color: #ff8244;
						text {
							font-size: 28upx;
						}
					}
					.buy_peo {
						flex: 2;
						font-size: 20upx;
						color: #9f9f9f;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.bottom_right {
						flex: 3;
						display: flex;
						align-items: center;
						justify-content: center;
						.num {
							width: 40upx;
							height: 35upx;
							border: 2upx solid #000000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			.goods_right {
				flex: 1;
				height: 200upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 15upx 0;
				.check {
					flex: 1;
					.select_img {
						width: 60upx;
						height: 60upx;
					}
				}
				.delete {
					flex: 1;
					display: flex;
					align-items: flex-end;
					image {
						width: 25upx;
						height: 25upx;
					}
				}
			}
		}
	}
	.bottom_bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		border-top: 2upx solid #cccccc;
		background: #ffffff;
		.bar_left {
			flex: 2;
			display: flex;
			align-items: center;
		}
		.bar_right {
			flex: 5;
			display: flex;
			align-items: center;
			justify-content: center;
			.gongji {
				flex: 2;
				font-size: 24upx;
				color: #9f9f9f;
			}
			.heji {
				flex: 2;
				font-size: 28upx;
				text {
					font-size: 24upx;
					color: #dd7d01;
				}
			}
			.jiesuan {
				flex: 2;
				.jiesuan_btn {
					width: 90%;
					height: 70upx;
					border-radius: 35upx;
					background-image: linear-gradient(top, #bd9a74, #f6d2a0);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32upx;
					box-shadow: 0 10upx 30upx #cacaca;
				}
			}
		}
	}
	.null_wrap {
		display: flex;
		height: 60vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.order_null {
			image {
				width: 368upx;
				height: 479upx;
			}
		}
		.toVisit {
			margin-top: 40upx;
			width: 200upx;
			height: 60upx;
			border-radius: 10upx;
			background-image: linear-gradient(top, #bd9a74, #f6d2a0);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
